<template>
<div class="category-main">
    <el-card class="card">
        <div slot="header" class="header">
            <el-button type="primary" @click="addCategory">新增分类</el-button>
        </div>
        <div>
            <el-table :data="categoryList" style="width: 100%" v-loading="loading"  element-loading-text="拼命加载中……">
                   <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="name" label="名称">
                </el-table-column>
                 <el-table-column header-align="center" align="center" label="分类图片" width="130">
                    <template slot-scope="scope">
                        <img :src="scope.row.icon" alt="sorry">
                    </template>
                </el-table-column>
                 <el-table-column header-align="center" align="center" prop="description" label="服装分类">
                </el-table-column>
                     <el-table-column
                    header-align="center"
                    align="center"
                    label="是否显示" >
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.navStatus" :active-value="1" :inactive-value="0" @change="changeNewStatus(scope.row.showStatus,scope.row.id)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    label="是否显示" >
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" @change="changeNewStatus(scope.row.showStatus,scope.row.id)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="keywords" label="关键词">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="productCount" label="商品数量">
                </el-table-column>
                  <el-table-column header-align="center" align="center" prop="productUnit" label="单位">
                </el-table-column>
                 <el-table-column header-align="center" align="center" prop="level" label="级别">
                </el-table-column>
                <el-table-column header-align="center" align="center" label="操作" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="goEditcategory(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="goDelCategory(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </el-card>

    <!-- 编辑和新增的组件 -->
    <EditCategory ref="isEditAdd" @success="goEditOrAdd"></EditCategory>
</div>
</template>

<script>
import {
    getAllCategory,
    delCategory
} from '@/api/product/category/index'

import EditCategory from '@/views/product/component/EditCategory'

export default {
    name :'CategoryList',
    components: {
        EditCategory
    },
    data() {
        return {
            categoryList: [],
            editContent:{},
            loading:true

        };
    },
    computed: {

    },
    created() {
        this.init()

    },
    mounted() {

    },
    methods: {
        init() {
            getAllCategory().then(res => {
                console.log(res);
                if (res.success) {
                    this.loading=false
                    // this.categoryList = res.data.items
                    res.data.items.forEach(el => {
                        this.categoryList.push(el.category)
                    })
                }
            })
        },
        // 编辑
        goEditcategory(row) {
                        this.$refs.isEditAdd.dialogVisible=true
            this.$refs.isEditAdd.category=row

        },
        // 删除
        goDelCategory(id) {
            this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delCategory(id).then(res => {
                    console.log(res)
                    if (res.success) {
                        this.init()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 添加分类
        addCategory(){
            this.$refs.isEditAdd.dialogVisible=true
        },
        goEditOrAdd(){
            //  this.$refs.EditCategory.dialogVisible=true
            // this.$refs.EditCategory.init(this.editContent)
        }
      

    },
};
</script>

<style lang="scss" scoped>
.card {
    margin: 30px;

    .header {
        font-weight: bolder;
        color: #26A65B;
        font-size: 22px;

    }
    img{
        width: 120px;
        height: 120px;
    }
}
</style>
